<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        body {
            margin: 30px;
        }
    </style>
    <script src='./vue.global.js'></script>
    <script src='./gsap.min.js'></script>
</head>

<body>
    <div id="demo">
        <input v-model="query" />
        <transition-group name="staggered-fade" tag="ul" :css="false" @before-enter="beforeEnter" @enter="enter"
            @leave="leave">
            <li v-for="(item, index) in computedList" :key="item.msg" :data-index="index">
                {{ item.msg }}
            </li>
        </transition-group>
    </div>
    <script>
        const Demo = {
            data() {
                return {
                    query: '',
                    list: [
                        { msg: 'Bruce Lee' },
                        { msg: 'Jackie Chan' },
                        { msg: 'Chuck Norris' },
                        { msg: 'Jet Li' },
                        { msg: 'Kung Fury' }
                    ]
                }
            },
            computed: {
                computedList() {
                    var vm = this
                    return this.list.filter((item) => {
                        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
                    })
                }
            },
            methods: {
                beforeEnter(el) {
                    el.style.opacity = 0
                    el.style.height = 0
                },
                enter(el, done) {
                    gsap.to(el, {
                        opacity: 1,
                        height: '1.6em',
                        delay: el.dataset.index * .15,
                        onComplete: done
                    })
                },
                leave(el, done) {
                    gsap.to(el, {
                        opacity: 0,
                        height: 0,
                        delay: el.dataset.index * .15,
                        onComplete: done
                    })
                }
            }
        }

        Vue.createApp(Demo).mount('#demo')
    </script>
</body>

</html>